import { useSelector,useDispatch } from 'react-redux'
import { increment,decrement } from '../features/counter/counterSlice'

const Coutner = () => {
    const counter = useSelector((state)=>state.counter.value)
    const dispatch = useDispatch()

    const handleAdd = () => {
        dispatch(increment())
    }
    const handleDec = () => {
        dispatch(decrement())
    }
    return (
        <div>
            <h1>Coutner</h1>
            <div>counter: {counter}</div>
            <div>
                <button onClick={ handleAdd }>+</button>
            </div>
            <div>
                <button onClick={ handleDec }>-</button>
            </div>
        </div>
    )
}

export default Coutner